<!--
 * @Author: 华芊芊 huaqianqian@yeah.net
 * @Date: 2023-11-29 16:15:39
 * @LastEditors: 华芊芊 huaqianqian@yeah.net
 * @LastEditTime: 2023-11-29 16:41:25
 * @FilePath: \test\src\components\mapList\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="custom-list" :style="position+':0;'">
    <!-- 标题部分 -->
    <div class="title-row">{{ title }}</div>

    <!-- 表头部分 -->
    <div class="header-row">
      <div v-for="(column, index) in columns" :key="index" class="column">
        {{ column }}
      </div>
    </div>

    <!-- 列表部分 -->
    <div class="list-row" v-for="(item, index) in items" :key="index">
      <div v-for="(value, key) in item" :key="key" class="column">
        <div v-if="typeof value === 'object'">
          <!-- 上面是百分比 -->
          <!-- <div>{{ value.per }}</div> -->
          <!-- 下面是小进度条，可以根据实际需求进行样式和逻辑的调整 -->
         
          <div class="progress-bar" > 
            <el-progress :text-inside="true" :stroke-width="14" :percentage="value.per" color="#2399bd" text-color="#fff"></el-progress>
          </div>
        </div>
        <div v-else>
            <!-- <el-tooltip :content="value" effect="light"> -->
          {{ value }}
            <!-- </el-tooltip> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    columns: Array,
    items: Array,
    // 父盒子设置position:reactive;
    position:String,
  },
};
</script>

<style lang="scss" scoped>
//进度条
::v-deep .el-progress {
  .el-progress-circle__track {
    stroke: #395d87;
  }
  width: 100%;
  text-align: center;
  .el-progress__text {
    display: none !important;
  }
  .el-progress-bar__outer {
    background-color: #395d87 !important;
  }
  .el-progress-bar__inner {
    background-image: linear-gradient(to right, #39456c, #41bcd5);
  }
}

.custom-list{
  position: absolute;
  top:10px;
  // right:0 ;
}
.progress-bar{
  padding: 5px;
}
.title-row {
  font-size: 16px;
  font-weight: 600px;
  width: 100%;
  text-align: center;
  height: 30px;
  line-height: 30px;
}
.custom-list {
  /* 添加样式以适应您的需求 */
  width: 260px;
}
.header-row,
.list-row {
  display: flex;
  justify-content: space-between;
}
.header-row {
  /* 表头样式 */
}

.list-row {
  .column{
    background: linear-gradient(180deg, #095790 0%, #0d3a74 100%);
  }
}

.column {
  /* 列样式 */
  text-align: center;
  width: 100%;
  height: 28px;
  line-height: 28px;
  font-size: 14px;
  color: #fff;
  padding: 0px 11px;
  text-overflow: ellipsis; /* ellipsis:显示省略符号来代表被修剪的文本  string:使用给定的字符串来代表被修剪的文本*/
  white-space: nowrap; /* nowrap:规定段落中的文本不进行换行   */
  overflow: hidden; /*超出部分隐藏*/
 
}
.column:first-of-type{
  width: 110px;
}
</style>
